{include file="public/header"/}
<link rel="stylesheet" href="/public/static/admin/easyui/layui-v2.6.8/css/layui.css">
<link rel="stylesheet" type="text/css" href="/public/static/admin/easyui/jeasyui/themes/icon.css">
<style>
	#matchCon {
		width: 200px;
	}

	.container .grid-wrap {
		position: relative;
	}

	.ztreeDefault {
		background-color: #fff;
		border: 1px solid #D6D5D5;
		width: 265px;
		height: 416px;
		overflow-y: auto;
	}

	td.img {
		background: url("/css/img/no_pic.gif") center no-repeat
	}

	.number_sku {
		padding: 13px 13px 0 0;
		position: absolute;
		right: 10px;
		top: 12px;
	}

	.number_sku:hover {
		cursor: pointer;
	}

	td[aria-describedby=grid_name] {
		position: relative;
	}

	.add {
		background: #fff url("/css/img/number_sku.png") no-repeat
	}

	.plus {
		background: #fff url("/css/img/number_sku.png") no-repeat 0 -13px
	}

	.isCommon {
		display: inline-block;
		background-color: #ECE40F;
		color: #000;
	}

	.unCommon {
		display: inline-block;
		background-color: #CAC9C5;
		color: #000;
	}

	.ztree.showRoot li ul.level0 {
		/* background: url(./img/line_conn.gif) 0 0 repeat-y; */
		padding: 0 0 0 18px;
	}

	.ztree.showRoot li span.button.switch.level0 {
		visibility: visible;
		width: 18px;
	}

	.layui-form-select .layui-edge,
	.layui-form-checkbox[lay-skin=primary] i {
		padding: 0;
	}

	.layui-form-select dl dd.layui-this {
		background-color: #dcdcdc;
		color: #000;
	}

	.layui-form-checkbox[lay-skin=primary]:hover i {
		border-color: #38B3EB;
	}

	.layui-form-checked[lay-skin=primary] i {
		border-color: #38B3EB !important;
		background-color: #38B3EB;
	}

	.layui-input,
	.layui-select {
		height: 30px;
	}

	.tabImg:hover {
		width: 500px;
	}
</style>
<div class="container fix p20">
	<div class="mod-search m0 cf layui-form">
		<div class="fl">
			<ul class="ul-inline">
				<li>
					<input type="text" id="matchCon" class="ui-input ui-input-ph" value="请输入商品编号或名称或型号">
				</li>
				<li>
					<label>仓库:</label>
					<span class="layui-input-inline" style="width: 130px;">
						<!-- <input  type="text" class="input-txt" autocomplete="off" readonly="readonly" style="cursor: default; width: 84px;"><span class="trigger"></span></span> -->
						<select name="interest" lay-filter="aihao">
							<option value="">空</option>
							<option value="0">默认仓库</option>
						</select>
					</span>
				</li>
				<li class="" id="chk-stock" style="line-height:30px;">
					<input type="checkbox" name="" lay-skin="primary" title="零库存商品" checked="">
				</li>
				<li class="dn" id="chk-disabled-goods " style="line-height:30px;">
					<input type="checkbox" name="" lay-skin="primary" title="显示禁用商品">
				</li>
				<li><a class="ui-btn mrb" id="search">查询</a><!-- <a class="ui-btn" id="refresh">刷新</a> -->
				</li>
				<li><a class="ui-btn mrb" id="generalGoods">常用商品</a><!-- <a class="ui-btn" id="refresh">刷新</a> -->
				</li>
			</ul>
		</div>
	</div>
	<div style="width: 100%;height: auto;display: flex;">
		<div class="grid-wrap" style="flex: 1;">
			<table id="grid">
			</table>
			<div id="page"></div>
		</div>

		<ul class="ztree ztreeDefault showRoot easyui-tree" id="tt"
			style="height: 356px;flex: none;width: 200px;margin-left: 6px;">
			<!-- <li>
                <span>全部</span>
                <ul>
                    <li>
                        <span>默认分类</span>
                    </li>
                </ul>
            </li> -->
		</ul>

	</div>
</div>
<div id="initCombo" class="dn">
	<input type="text" class="textbox unitAuto" name="unit" autocomplete="off">
</div>

<!-- 列表鼠标移入显示大图的容器 -->
<div id="maxImg" style="position: absolute;z-index: 999;display: none;">
	<img src="/public/static/admin/css/img/btn_descease_normal.png" width="250" height="250" />
</div>

<script src="/public/static/admin/easyui/layui-v2.6.8/layui.js"></script>
<script type="text/javascript" src="/public/static/admin/easyui/jeasyui/jquery.easyui.min.js"></script>

<script>
	// 监听列表图片（鼠标移入事件）
	function mouseover(x, img, id) {
		// console.log(id)
		var tableImg = "tableImg" + id;
		var top = $("#" + tableImg).offset().top;
		var left = $("#" + tableImg).offset().left;
		$("#maxImg>img").attr("src", img)
		$("#maxImg").show();
		$("#maxImg").css({ "top": (top - 45) + "px", "left": (left + 24) + "px" });

	};
	// 监听列表图片（鼠标移出事件）
	function mouseout(params) {
		$("#maxImg").hide();
	}

	$(document).ready(function () {
		// 列表大图鼠标移入移出
		$("#maxImg").hover(function () {
			$("#maxImg").show();
		}, function () {
			$("#maxImg").hide();
		});

		$('#tt').tree({
			url: 'getGoodCategory.html',
			onClick: function (node) {
				// f5('index.html?ajax=100&goods_category=' + node.id);

				//此处可以添加对查询数据的合法验证 
				$("#grid").jqGrid('setGridParam', {
					datatype: 'json',
					postData: { 'ajax': '100', 'goods_category': node.id }, //发送数据 
					page: 1
				}).trigger("reloadGrid"); //重新载入 
			}
		});

		$("#grid").jqGrid({
			url: '/admin/basic/choose_goods.html?ajax=100',
			datatype: "json",//数据来源，本地数据（local，json,jsonp,xml等）
			height: '304px',//高度，表格高度。可为数值、百分比或'auto'
			//width: Public.setGrid().w,
			//height: Public.setGrid().h,
			colNames: ["图片", "商品编号", "商品名称", "规格型号", "商品类别", "单位", "库存基本数量", "可用库存", "录入数量", "备注", "常用商品"],
			colModel: [

				{ name: '', width: 40, lable: '图片', editable: false, formatter: imgs },
				{ name: 'sn', width: 100, lable: '商品编号', editable: false },
				{ name: 'name', width: 200, lable: '商品名称', editable: false },
				{ name: 'model', width: 106, lable: '规格型号', editable: false },
				{ name: 'goods_category_id', width: 80, lable: '商品类别', editable: false },
				{ name: 'unit', width: 80, lable: '单位', editable: true },
				{ name: '', width: 70, lable: '库存基本数量', editable: false },
				{ name: '', width: 70, lable: '可用库存', editable: false },
				{ name: '', width: 70, lable: '录入数量', editable: true },
				{ name: '', width: 100, lable: '备注', editable: false },
				{ name: '', width: 60, lable: '常用商品', editable: false, formatter: cCommon },
			],
			//cellEdit:true,
			cellurl: '/',
			// cellsubmit:false,
			rowNum: 10,
			rowList: [10, 20, 30],
			sortname: 'id',
			sortorder: "desc",
			pagerpos: "left",//分页位置

			pgbuttons: true,//翻页按钮
			pagination: true,
			altRows: !0,
			gridview: !0,
			shrinkToFit: !1,
			cellLayout: 8,
			autowidth: !0,
			pager: "#page",
			viewrecords: !0,
			checkOnSelect: true,
			multiselect: true,//自带多选
			multiboxonly: true,//变成单选
			cmTemplate: {
				sortable: !1,
				title: !1
			},
			loadError: function (t, e, i) {
				parent.Public.tips({
					type: 1,
					content: "操作失败了哦，请检查您的网络链接！"
				})
			}
		});


		function imgs(cellvalue, options, rowObject) {
			var img = '/public/static/admin/icon/no_pic.gif';
			if (rowObject.img_path != null) {
				img = '/public/uploads/' + rowObject.img_path;
				return '<img src="' + img + '" id="tableImg' + rowObject.id + '" width="40px" height="40px" onmouseout="mouseout()" onmouseover="mouseover(this, \'' + img + '\',' + rowObject.id + ')"/>';
			}
			else {
				return '<img src="' + img + '" id="tableImg' + rowObject.id + '" width="40px" height="30px" />';
			}
		}

		function cStatus(cellvalue, options, rowObject) {
			// console.log(rowObject.status);
			if (rowObject.status == 0) {
				return '<span class="set-status open" data-delete="false" onclick="switchs(this,' + rowObject.id + ')"><span class="ui-icon-circle"></span></span>';
			} else {
				return '<span class="set-status close" data-delete="false" onclick="switchs(this,' + rowObject.id + ')"><span class="ui-icon-circle"></span></span>';
			}
		}

		function cCommon(cellvalue, options, rowObject) {
			// console.log(rowObject.status);
			if (rowObject.is_common == 0) {
				return '<span class="common-set-status common-set-default" onclick="common(this,' + rowObject.id + ')" data-delete="false" ></span>';
			} else {
				return '<span class="common-set-status common-set-success" onclick="common(this,' + rowObject.id + ')" data-delete="true" ></span>';
			}
		}
	});

	function common(obj, id) {
		if ($(obj).hasClass("common-set-default")) {
			$(obj).removeClass("common-set-default");
			$(obj).addClass("common-set-success");
			is_common = 1;
		} else {
			$(obj).removeClass("common-set-success");
			$(obj).addClass("common-set-default");
			is_common = 0;
		}
	}
</script>
{include file="public/footer"/}